<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--IE Compatibility modes-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Mobile first-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>403</title>

    <meta name="description" content="Free Admin Template Based On Twitter Bootstrap 3.x">
    <meta name="author" content="">

    <meta name="msapplication-TileColor" content="#5bc0de"/>
    <meta name="msapplication-TileImage" content="assets/img/metis-tile.png"/>

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
<#--<link rel="stylesheet" href="assets/lib/font-awesome/css/font-awesome.min.css">-->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/lib/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/assets/lib/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css">
    <!-- Metis core stylesheet -->
    <link rel="stylesheet" href="/assets/css/main.css">


    <!-- animate.css stylesheet -->
    <link rel="stylesheet" href="/assets/lib/animate.css/animate.css"/>
    <link rel="stylesheet" href="/assets/lib/select2/css/select2.min.css"/>
    <link rel="stylesheet" href="/assets/lib/bootstrap-validator/css/bootstrapValidator.min.css"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style>
        .text_info {
            border: 0px;
        }
    </style>
    <![endif]-->
</head>

<body>
<div class="bg-dark dk" id="wrap" style="height:50px;">
    <header class="head">
        <div class="">
            <ol class="breadcrumb" style="background-color: #3a3a3a">
                <li><a href="#"> <i class="fa fa-home"> 系统设置</i></a></li>
                <li class="active">版本管理</li>
            </ol>
        </div>
        <!-- /.main-bar -->
    </header>
</div>
<div class="container" style="width:100%;">
    <div class="row">
        <div class="col-lg-12">
            <div class="box dark">
                <header>
                    <div class="icons"><i class="fa fa-th-large"></i></div>
                    <h5>版本管理</h5>
                    <!-- .toolbar -->
                    <div class="toolbar">
                        <nav style="padding: 8px;">
                        </nav>
                    </div>            <!-- /.toolbar -->
                </header>
                <div class="col-lg-12">
                    <div class="box">
                        <div id="collapse4" class="body">
                            <table id="dataTable"
                                   class="table table-bordered table-condensed table-hover table-striped">
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--END TEXT INPUT FIELD-->
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="">
                <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">历史记录</div>
            <ul id="log_ul">
            </ul>
        </div></div></div>
        </div>
    </div>
    <!-- /.col-lg-8 col-offset-2 -->
    <!--------------------------添加用户的弹出层---------------------------->
    <div id="update_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         data-backdrop="static"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>


                    <h5 class="modal-title">
                        <i class="icon-pencil"></i>
                        <span data-type="add" style="font-weight:bold">修改版本信息</span>
                    </h5>
                </div>
                <form class="form-horizontal form-bordered form-row-strippe" id="add_form" action=""
                      data-toggle="validator" enctype="multipart/form-data">
                    <input type="hidden" name="id" />
                    <div class="modal-body">
                        <input name="id" type="hidden" value=""/>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">最低版本</label>
                                    <div class="col-md-10">
                                        <input name="minVersion" type="text" class="form-control"
                                               placeholder="最低版本..."/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">最高版本</label>
                                    <div class="col-md-10">
                                        <input name="maxVersion" type="text" class="form-control"
                                               placeholder="最高版本..."/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2">下载地址</label>
                                    <div class="col-md-10">
                                        <input name="downLoadUrl" type="text" class="form-control"
                                               placeholder="下载地址..."/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-info">
                        <input type="hidden" id="ID" name="ID"/>
                        <button type="button" id="update_button" class="btn blue">确定</button>
                        <button type="button" class="btn green" data-dismiss="modal">取消</button>
                    </div>
                    <div class="alert alert-danger error_div" style="text-align: center">
                        <strong>错误!</strong><span></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /modal -->

</div>
<!--jQuery -->
<script src="/assets/lib/jquery/jquery.min.js"></script>
<!--Bootstrap -->
<script src="/assets/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/assets/lib/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/assets/lib/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="/assets/lib/select2/js/select2.min.js"></script>
<script src="/assets/lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<!-- MetisMenu -->
<script src="/assets/lib/metismenu/metisMenu.js"></script>
<!-- Metis core scripts -->
<script src="/assets/js/core.js"></script>
<!-- Metis demo scripts -->
<script src="/assets/js/app.js"></script>
<script src="/assets/lib/layer/layer.js"></script>
<script>
    var csrf_token = "${_csrf.token}";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN':csrf_token
        }});
    var versionList=[];
    $(document).ready(function () {
        initTable();
        $(document).on("click", ".version-edit", function (e) {
            $("#update_modal").find(".error_div").hide();
            var versionId = $(e.target).closest("tr").find("td:first").find("span").attr("data-id");
            if(versionList&&versionList.length>0){
                var obj;
                versionList.map(function (p1, p2, p3) {
                    if(p1.id==versionId){
                        obj=p1;
                        return;
                    }
                });
                if(obj){
                    var $form = $("#update_modal").find("form");
                    $form.find("input").each(function () {
                        var name = $(this).attr("name");
                        switch (name) {
                            case "id":
                                $(this).val(obj.id);
                                break;
                            case "minVersion":
                                $(this).val(obj.minVersion);
                                break;
                            case "maxVersion":
                                $(this).val(obj.maxVersion);
                                break;
                            case "downLoadUrl":
                                $(this).val(obj.downLoadUrl);
                                break;
                        }
                    });
                }
            }
            $("#update_modal").modal("show");
        });
        $(document).on("click", "#update_button", function (e) {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/sys/update/version",
                data:$(this).closest("form").serialize(),
                success: function (res) {
                    if (res.status != "y") {
                        layer.msg(res.info, {icon: 7});

                    } else {
                        layer.msg("修改成功", {icon: 6});
                        $("table").bootstrapTable('refresh');
                        initLogVersion();
                    }
                },
                error: function (xhr, errorType, error) {
                    layer.msg("操作失败", {icon: 7});
                },
                complete:function () {
                    $("#update_modal").modal("hide");
                }
            });
        });
        initLogVersion();
    });
    function showError(obj, error) {
        obj.find(".error_div").find("span").text(error);
        obj.find(".error_div").show();
    }
    function initLogVersion(){
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/sys/get/logVersions",
            success: function (res) {
                if (res==null||res.status) {
                    layer.msg("获取历史记录失败", {icon: 7});
                } else {
                    console.log(res);
                    var $ul=$("#log_ul");
                    $ul.empty();
                    res.map(function (p1, p2, p3) {
                        console.log(p1);
                        var $li=$("<li></li>");
                        $li.text("修改时间:"+(p1.modifyTime?new Date(p1.modifyTime).format('yyyy-MM-dd hh:mm:ss'):"")+",平台类型:"+p1.platform+",最高版本:"+p1.maxVersion+",最低版本:"+p1.minVersion+",下载地址:"+p1.downLoadUrl);
                        $ul.append($li);
                    });
                }
            },
            error: function (xhr, errorType, error) {
                layer.msg("获取历史记录失败", {icon: 7});
            },
            complete:function () {
            }
        });
    }
    function initTable() {
        var url = "/sys/get/versions";
        $('table').bootstrapTable({
            method: 'GET',
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
            url: url,
            sortable: true,
            showColumns: false,
            pagination: false,
            minimumCountColumns: 2,
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showExport: true,
            exportDataType: 'all',
            columns: [
                {
                    field: 'id',
                    title: '序列号',
                    formatter: function (value, row, index) {
                        var pageSize = $('table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
//                        return pageSize * (pageNumber - 1) + index + 1;    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                        return "<span data-id='" + value + "'>" + (pageSize * (pageNumber - 1) + index + 1) + "</span>";
                    }
                },
                {
                    field: 'minVersion',
                    title: '最低版本',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'maxVersion',
                    title: '最高版本',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'platform',
                    title: '平台类型',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'downLoadUrl',
                    title: '下载地址',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'createTime',
                    title: '创建时间',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return new Date(value).format('yyyy-MM-dd hh:mm:ss');
                    }
                },
                {
                    field: 'modifyTime',
                    title: '修改时间',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return new Date(value).format('yyyy-MM-dd hh:mm:ss');
                    }
                }
                ,
                {
                    field: '',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        var strHtml = '<a title="编辑"  href="javascript:void(0);"  class="btn btn-xs btn-info version-edit" ><i class="fa fa-edit bigger-120"></i></a>';
                        return strHtml;
                    }
                }
            ],
            onLoadSuccess: function(data){  //加载成功时执行
             versionList=data;
            }
        });

    }

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
    };
    Date.prototype.format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>
</body>

</html>
